<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>渣渣萍</title>
		<style type="text/css">
			body{
				margin: 0;
			}
			.box{
				width: 300px;
				height: 300px;
				margin: 150px auto;
				/*background-color: #ff66cc;*/
				perspective: 800px;/*精深   视距*/
			}
			.box .box-3d{ 
				position: relative;
				width: 300px;
				height: 300px;
				transform-style: preserve-3d;/*设置效果为3d*/
				transform: rotateY(0deg);
				transition: 4s;/*过渡时间*/
				
			}
			.box .box-3d div{
				position: absolute;
				width: 300px;
				height: 300px;
				border: 2px solid blue;
			/*	opacity: 0.7;        透明度*/
			  background-size: 300px 300px;/*改图片大小*/
			}
			.box .box-3d:hover{
				transform: rotatex(300deg);
				/*Y轴左右来回转       X轴上下转    Z轴圆形转动*/
			}
			.shang{
				transform: rotateX(90deg) translateZ(152px);
				/*background-color: #ff66cc;*/
				background: url(img/4.jpg);
			}
			.xia{
				transform: rotateX(-90deg) translateZ(152px);
				background: url(img/6.jpg);
			}
			.qian{
				transform: translateZ(152px);
				background: url(img/3.jpg);
			}
			.hou{
				transform: translateZ(-152px);
				background: url(img/2.jpg);
			}
			.zuo{
				transform: rotateY(90deg) translateZ(-152PX);
				background: url(img/8.jpg);
			}
			.you{
				transform: rotateY(90deg) translateZ(152px);
				background: url(img/9.jpg);
			}
		</style>
	</head>
	<body>
		<div class="box">
		<div class="box-3d">
			<div class="shang"></div>
			<div class="xia"></div>
			<div class="qian"></div>
			<div class="hou"></div>
			<div class="zuo"></div>
			<div class="you"></div>
	</body>
</html>
